<template>
  <div class="app-container">
    <div>
      <el-form id="app" ref="form" :model="form" label-width="120px">
        <el-form-item label="任务名称" required>
          <el-input class="input-reader-name" v-model="form.name">
          </el-input>
        </el-form-item>
        <el-form-item label="所属项目" required>
          <el-select
            v-model="form.belong_project"
            :disabled="operation_type === 1 ? true:false"
            filterable
            placeholder="请选择项目"
            @change="projectChange">
            <el-option
              v-for="item in data_options.project_options"
              :key="item.id"
              :label="item.project_name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="测试类型" required>
          <el-select
            v-model="form.test_type"
            :disabled="operation_type === 1 ? true:false"
            filterable
            placeholder="请选择测试类型">
            <el-option label="套件" value="suite"/>
            <el-option label="项目" value="project"/>
            <el-option label="模块" value="module"/>
          </el-select>
        </el-form-item>
        <el-form-item label="测试项" required>
          <el-select
            v-model="form.params.index"
            :disabled="form.belong_project === '' ? true:false"
            filterable
            placeholder="请选择测试项">
            <el-option
              v-for="item in data_options.suite_options"
              :key="item.id"
              :label="item.suite_name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="任务运行配置" required>
          <el-select
            v-model="form.params.config_id"
            :disabled="operation_type === 1 ? true:false"
            filterable
            placeholder="请选择配置">
            <el-option
              v-for="item in data_options.config_options"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否开启" required>
          <el-tooltip>
            <el-switch
              v-model="form.enabled"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </el-tooltip>
        </el-form-item>
        <el-form-item label="定时配置" required>
          <el-input
              v-model="form.crontab"
              class="input-reader-name"
              placeholder="crontab表达式 例如:11 * * * *">
          </el-input>
        </el-form-item>
        <el-form-item label="邮件发送策略" required>
          <el-select
            v-model="form.strategy"
            :disabled="operation_type === 1 ? true:false"
            filterable
            placeholder="请选择测试类型">
            <el-option label="始终发送" value="始终发送"/>
            <el-option label="仅失败发送" value="仅失败发送"/>
          </el-select>
        </el-form-item>
        <el-form-item label="收件邮箱" required>
          <el-input
              v-model="form.receiver"
              class="input-reader-name"
              placeholder="xx@qq.com, xx@163.com 为空不发送报告">
          </el-input>
        </el-form-item>
        <el-form-item label="抄送邮箱" required>
          <el-input
              v-model="form.copy"
              class="input-reader-name"
              placeholder="xx@qq.com, xx@163.com 为空不发送报告">
          </el-input>
        </el-form-item>
      </el-form>
    </div>
    <br>
    <div style="text-align: center">
      <el-button type="success" @click="onSubmit">保存</el-button>
      <el-button @click="onCancel">取消</el-button>
    </div>
  </div>

</template>

<script>
import { createSchedule, updateSchedule, getSchedule } from '@/api/schedule/table'
import { getProjectSumList } from '@/api/project/table'
import { getModuleSumList } from '@/api/module/table'
import { getCaseSumList } from '@/api/test_case/table'
import { getSuiteSumList } from '@/api/test_suite/table'
import { getConfigSumList } from '@/api/config/table'

export default {
  data() {
    return {
      operation_type: 0, // 0:create 1:update 2:copy
      editId: "",
      form: {
        name: '',
        belong_project: '',
        test_type: 'suite',
        params: {
          index: '',
          config_id: '',
        },
        enabled: true,
        strategy: '始终发送',
        crontab: '',
        receiver: '',
        copy: '',
      },
      data_options: {
        filter_project_id: null,
        project_options: [],
        module_options: [],
        suite_options: [],
        case_options: [],
        config_options: []
      }
    }
  },
  mounted() {
    console.log(this.$route.query.id)
    this.editId = this.$route.query.id || ""
    if (this.editId) {
      this.getParams();
    }
  },

  created() {
    this.fetchProjectSumList()
  },

  methods: {
    fetchProjectSumList() {
      getProjectSumList().then(response => {
        this.data_options.project_options = response.results
        console.log(this.data_options.project_options)
      })
    },
    projectChange() {
      console.log('project id:' + this.form.belong_project)

      if (this.form.test_type === 'suite') {
        this.fetchSuiteSumList()
      }
      if (this.form.test_type === 'project') {
        this.fetchProjectSumList()
      }
      if (this.form.test_type === 'module') {
        this.fetchModuleSumList()
      }

      this.fetchConfigSumList()

      this.form.params.index = ''
      this.form.params.config_id = ''
    },
    fetchModuleSumList: function() {
      if (this.form.belong_project) {
        var params = { 'belong_project': this.form.belong_project }

        return new Promise((resolve, reject) => {
          getModuleSumList(params).then(response => {
            this.data_options.module_options = response.results
            resolve(response)
          }).catch(e =>{
            reject(e)
          })
        })
      }
    },
    fetchSuiteSumList: function() {
      if (this.form.belong_project) {
        var params = {'belong_project': this.form.belong_project}

        return new Promise((resolve, reject) => {
          getSuiteSumList(params).then(response => {
            this.data_options.suite_options = response.results
            resolve(response)
          }).catch(e => {
            reject(e)
          })
        })
      }
    },
    fetchConfigSumList: function() {
      if (this.form.belong_project) {
        var params = { 'belong_project': this.form.belong_project }

        return new Promise((resolve, reject) => {
          getConfigSumList(params).then(response => {
            this.data_options.config_options = response.results
              resolve(response)
            }).catch(e => {
              reject(e)
            })
        })
      }
    },

    onSubmit() {
      if (this.editId) {
        updateProject(this.form).then(response => {
        if (response.status === '000000') return
          this.$message.success('更新成功'),
            this.$router.replace(`/test_schedule/schedule_list`)
       })
      }
      else{
        createSchedule(this.form).then((response) => {
        console.log(response.msg);
        if (response.status === '000000') return
        this.$message.success('创建成功'),
          this.$router.replace(`/test_schedule/schedule_list`)
        })
      }
    },
    onCancel() {
      this.$confirm('此操作将推出编辑, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$router.replace(`/test_schedule/schedule_list`)
        this.$message({
          type: 'success',
          message: '退出成功!',
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消退出'
        })
      })
    },

    getParams() {
      var params = {}
      params['id'] = this.editId
      getProject(params).then(response => {
        this.form = response.data
      })
    }
  }
}
</script>


<style scoped lang="scss">
.line {
  text-align: center;
}

.input-reader-name {
  width: 40%;
}

.flex-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-content: center;

  .inline-box {
    display: inline-block;
    width: 350px;

    &:last-child {
      width: 500px;
    }
  }

  > span {
    font-size: 30px;
    line-height: 290px;
  }
}

</style>

